<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"

      >
    <h:head>
        <title>Facelet Title</title>

    </h:head>
    <h:body>
        <ui:composition template="../Master/masters.xhtml">
            <ui:define name="content">

                <script type="text/javascript" src="../Jquery/jquery-1.7.1.min.js"></script>
                <script type="text/javascript" src="../Jquery/jquery-ui-1.8.17.custom.min.js"></script>
                <script type="text/javascript" src="../Jquery/jquery.dataTables.js"></script>
                <script type="text/javascript" src="../Jquery/jquery.easing-1.3.pack.js"></script>
                <script type="text/javascript" src="../Jquery/jquery.mousewheel-3.0.4.pack.js"></script>
                <script type="text/javascript" src="../Jquery/quickpager.jquery.js"></script>

                <script type="text/javascript" src="../Jquery/simpla.jquery.configuration.js"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#tableJquery').dataTable(
                        { "aoColumnDefs": [
                                { "bSortable": false, "aTargets": [0] },

                                { "asSorting": ["desc", "asc"], "aTargets": [1] }
                            ],
                            "sPaginationType": "full_numbers",
                            "aaSorting": [],
                            "aLengthMenu": [
                                [15, 30, -1],
                                [15,30, "All"]
                            ]
                        }
                    );
                    });
                </script>
                <div class="content-box">
                    <div class="content-box-header">

                        <h3 style="margin-top: -2px">ProFile Of #{profile.username}</h3>

                        <ul class="content-box-tabs" style="list-style: none">
                            <li><a href="#tab2" >My Complaints</a></li>
                            <li><a href="#tab1" class="default-tab">Change Password</a></li> <!-- href must be unique and match the id of target div -->

                        </ul>

                        <div class="clear"></div>

                    </div>
                    <div class="content-box-content">
                        <div class="tab-content default-tab" id="tab1">
                            <h:panelGroup rendered="#{profile.alert=='Change Password Successfull'}">
                                <div class="notification success png_bg">

                                    <div>
                                        #{profile.alert}
                                    </div>
                                </div>
                            </h:panelGroup>
                            <h:panelGroup rendered='#{profile.alert=="Old Password Invalid" or profile.alert=="Confirm password is invalid"}'>
                                <div class="notification error png_bg">

                                    <div>
                                        #{profile.alert}
                                    </div>
                                </div>
                            </h:panelGroup>
                            <p style="background-color: white">
                                <label>Old Password</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <h:inputSecret styleClass="medium-input" value="#{profile.oldPassword}"></h:inputSecret>
                            </p>
                            <p style="background-color: white">
                                <label>News Password&nbsp; </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <h:inputSecret styleClass="medium-input" value="#{profile.newPassword}"></h:inputSecret>
                            </p>
                            <p style="background-color: white;">
                                <label>Confirm Password</label>&nbsp;&nbsp;&nbsp;

                                <h:inputSecret styleClass="medium-input" value="#{profile.confirmPassword}"></h:inputSecret>
                            </p>
                            <p style="padding-left: 270px;background-color: white;padding-top: 15px">

                                <h:commandButton action="#{profile.changePassword()}" value="Change Password" styleClass="buttonContent1"  ></h:commandButton>

                            </p>
                        </div>
                        <div class="tab-content" id="tab2">

                            <table class="complaintTable" id="tableJquery">
                                <thead>
                                    <tr>
                                        <th style="text-align: left">Complaint Title</th>

                                        <th>Create Date</th>
                                        <th>Close Date</th>
                                        <th>Status</th>
                                        <th>Option</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <ui:repeat var="complaints" value="#{profile.complaints}">
                                        <tr>
                                            <td class="colTile" style="padding: 0px"><h:commandLink action="#{complaintsDetails.directionComplaints(complaints.complaintID,complaints)}">#{complaints.complaintTitle}</h:commandLink> </td>

                                            <td><h:outputText value="#{complaints.complaintCreateDate}" >
                                                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                                </h:outputText></td>
                                            <td style="text-align: left"><h:outputText value="#{complaints.complaintCloseDate}" >
                                                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                                </h:outputText></td>
                                            <td><h:panelGroup rendered="#{complaints.complaintStatus==0}"><span style="color: red;font-weight: bold">Wait</span></h:panelGroup>
                                                <h:panelGroup rendered="#{complaints.complaintStatus==1}"><span style="color: green;font-weight: bold">Done</span></h:panelGroup></td>
                                            <td>
                                                <h:panelGroup rendered="#{complaints.complaintStatus==0}">
                                                    <h:commandLink  action="#{profile.directEdit(complaints)}" title="Edit Complaint" >
                                                        <img src="../CSS/images/pencil.png"></img>
                                                    </h:commandLink>

                                                </h:panelGroup>
                                  
                                            </td>
                                        </tr>
                                    </ui:repeat>
                                </tbody>
                            </table>

                            <div class="clear"></div>
                        </div>


                    </div>
                </div>




            </ui:define></ui:composition>
    </h:body>
</html>

